<template>
	<div>
		<el-table :data="formDataFilter" style="width: 100%">
			<el-table-column prop="username" label="会员">
			</el-table-column>
			<!-- <el-table-column prop="phoneNumber" label="会员联系电话">
			</el-table-column> -->
			<el-table-column prop="family_name" label="家庭成员姓名">
			</el-table-column>
			<el-table-column prop="family_mobile" label="家庭成员联系电话">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="{row}">
					<el-button type="primary" @click="openMx(row.child)">明细</el-button>
				</template>
			</el-table-column>
		</el-table>
		<hxList :list="mxList" ref="hxList"></hxList>
	</div>
</template>

<script>
import hxList from './hxList.vue'
export default {
	name: "member-search",
	components: { hxList },
	props: {
		formData: {
			type: Array,
			default: () => []
		},
	},
	computed: {
		formDataFilter() {
			let map = new Map()
			this.formData.forEach((item) => {
				map.set(item.family_name, item)
			})
			let result = []
			let keys = [...map.keys()]
			keys.forEach((item) => {
				result.push({
					...map.get(item),
					child: this.formData.filter(ite => ite.family_name == item)
				})
			})
			return result
		}
	},
	data() {
		return {
			mxList: []
		}
	},
	beforeDestroy() {

	},
	methods: {
		openMx(list) {
			this.mxList = list
			this.$refs.hxList.open()
		}
	}
};
</script>

